<template>
  <h1>Hello Vue3</h1>
  <!-- 🔔 在模板中, ref 属性会自动解套, 不需要额外的 .value -->
  <h2>{{ msg }}</h2>
  <button @click="changeMsg">点击改变</button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    // 通过 ref 把普通字符串包装成响应式对象
    const msg = ref('Nice~')
    // 打印包装后的对象
    console.log(msg)
    // ref 真实值通过 .value 访问
    console.log(msg.value)
    const changeMsg = () => {
      // 修改响应式对象的真实值，视图能更新
      msg.value = '棒极了'
    }
    return { msg, changeMsg }
  },
})
</script>
